<template>
  <div class="addContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <template #header>
            <span style="font-weight: bold; font-size: 16px">新增计划</span>
          </template>
          <div class="addBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-form style="margin-top: 40px" label-width="120">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="计划编号">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="计划名称">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="来源类型">
                      <el-select
                        placeholder="请选择来源类型"
                        style="width: 300px"
                      >
                        <el-option
                          value="销售订单"
                          label="销售订单"
                        ></el-option>
                        <el-option
                          value="库存备货"
                          label="库存备货"
                        ></el-option>
                        <el-option value="其他" label="其他"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="订单编号">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="成品名称">
                      <el-input
                        placeholder="请选择成品"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="成品编号">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="规格型号">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="成品类型">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="单位">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="计划数量">
                      <el-input-number
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="开工时间">
                      <el-date-picker
                        style="width: 300px"
                        type="date"
                        placeholder="请选择日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="完工时间">
                      <el-date-picker
                        style="width: 300px"
                        type="date"
                        placeholder="请选择日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-form-item label="需求日期">
                    <el-date-picker
                      style="width: 300px"
                      type="date"
                      placeholder="请选择日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-row>
                <el-form-item label="备注">
                  <el-input type="textarea" style="width: 795px"></el-input>
                </el-form-item>
                <el-form-item label="附件">
                  <el-upload
                    style="width: 795px"
                    class="upload-demo"
                    drag
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                  >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                      Drop file here or <em>click to upload</em>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-form>
            </div>
            <div class="bomContainer">
              <div class="bomInfoContainer">
                <div class="milestone">
                  <div class="milestone-content">BOM组成</div>
                </div>
                <div
                  style="
                    width: 100%;
                    margin-top: 40px;
                    display: flex;
                    justify-content: center;
                  "
                >
                  <el-button type="primary">选择BOM</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
        <el-button type="primary" style="width: 80px">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";

const $router = useRouter();
const isFooterVisible = ref(false);
onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
});
const close = () => {
  $router.replace("/production/project");
};
</script>

<style scoped lang="scss">
.addContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .addBody {
    width: 100%;
    .basicInfoContainer,
    .bomInfoContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .bomInfoContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>